<template>
  <div class="goodsinfo-container">
    <transition
      @before-enter = "beforeEnter"
      @enter = "enter"
      @after-enter = "afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    

      <!-- 商品轮播图区域 -->
    <div class="mui-card">
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
          <swiper :lunbotuList="lunbotu" :isfull="isfull"></swiper>
			</div>
		</div>
	</div>

      <!-- 商品购买区域 -->
    <div class="mui-card">
		<div class="mui-card-header">{{ goodsinfo.title }}</div>
		  <div class="mui-card-content">
			<div class="mui-card-content-inner">
        <p class="price">
          市场价：<del>￥{{ goodsinfo.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{ goodsinfo.sell_price }}</span>
        </p>
        <p>购买数量：<numbox @getCount= "getSelectCount" :max="goodsinfo.stock_quantity"></numbox></p>
        <p>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button> 
        <!-- 分析  如何实现加入购物车时候拿到  选择的数量
          1. 经过分析发现： 按钮属于 goodsinfo 页面  数字属于numberbox 组件
          2. 由于涉及到了父子组件的嵌套了，所以无法直接在 goodsinfo 页面中获取到选中的商品数量值
          3. 怎么解决这个问题???  涉及到了 子组件向父组件传值了（事件调用机制）   
          4. 事件调用的本质：父向子传递方法，子调用这个方法，同时把  数据当做参数传递给这个方法
           -->
        </p>
			</div>
		  </div>
	</div>

      <!-- 商品参数区域 -->
     <div class="mui-card">
		<div class="mui-card-header">商品参数</div>
		  <div class="mui-card-content">
			<div class="mui-card-content-inner">
				 <p>商品货号：{{ goodsinfo.goods_no }} </p>
         <p>库存情况：{{ goodsinfo.stock_quantity }} </p>
         <p>上架时间：{{ goodsinfo.add_time | dateFormat('YYYY-MM-DD')}} </p>
			</div>
		  </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goDesc(id)"> 图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goComment(id)"> 商品评论</mt-button>
      </div>
	  </div>
    </div>

    <!-- 分析 为什么商品评论中的轮播图 那么丑 -->
    <!-- 1.首页中的图片，宽高都是使用了100% -->
    <!-- 2.商品详情中使用100%宽高的话，图片变形，非常难看，因此需要高度100% 宽度自适应    分歧点 ：   到底应该自适应，还是100% -->
    <!-- 3.既然 这两个轮播图，其他方面都是没有冲突的，只是宽度有分歧，那么我们可以定义一个属性  让轮播图的调用者，手动指定是否为100%的宽度 -->
</template>

<script>
import swiper from "../subcomponents/swiper.vue"
// 导入数组选择框
import numbox from "../goods/goodsinfo_numbox.vue"

export default {
    data(){
        return{
          id: this.$route.params.id, // 将路由参数对象中的id 挂载到 data 中，方便后期调用
          lunbotu: [],  //轮播图的数据
          isfull: false,
          goodsinfo: {},
          ballFlag: false,  //控制小球隐藏与显示的
          selectCount: 1  // 保存用户选中的商品属性，默认，认为用户买一个
        }
    },
    created(){
      this.getLunbotu()
      this.getGoodsInfo()
    },
    methods:{
        getLunbotu(){
            this.$http.get('api/getthumimages/' + this.id).then( result => {
              if(result.body.status === 0){
                this.lunbotu = result.body.message
                // 循环轮播图数组的每一项 为item 添加 img 属性  因为轮播图组件中，只认识 item.img 不认识 item.src
                result.body.message.forEach(item => {
                  item.img = item.src
                })
              }
            })
        },
        getGoodsInfo(){
          // 获取商品的信息
          this.$http.get('api/goods/getinfo/' + this.id).then( result => {
            if(result.body.status ===0 ){
              this.goodsinfo = result.body.message[0]
            }
          })
        },
        goDesc(id){
          // 点击使用编程时导航   跳转到 图文介绍页面
          this.$router.push( {name:"goodsdesc", params:{ id }} )
        },
        goComment(id){
          // 点击使用编程时导航   跳转到 商品评价页面
          this.$router.push( {name:"goodscomment", params:{ id }} )
        },
        addToShopCar(){
          // 添加到购物车
          this.ballFlag = !this.ballFlag
          var goodsinfo = {   // 拼接出一个要保存到store中car数组里的商品信息对象
            id: this.id, 
            count: this.selectCount, 
            price: this.goodsinfo.sell_price, 
            selected: true 
            }

            // 调用 store 中 的  mutations  来将商品加入购物车
            this.$store.commit('addToCar', goodsinfo)
        },
        beforeEnter(el){
          el.style.transform = "translate(0, 0)"
        },
        enter(el,done){
          el.offsetWidth
          //小球动画优化思路
          // 1.先分析，导致动画不准确的本质原因，我们吧小球最终位移到的位置 ，已经局限在了某一分辨率下的 滚动条未滚动的情况下
          // 2.只要分辨率和测试的时候不一样，或者滚动条有一定的滚动距离之后，问题就出现了
          // 3.因此我们经过分析得到结论，不能把位移的横纵坐标直接写死了 ，根据不同情况，动态计算这个坐标值
          // 4.经过分析，得出解题思路：先得到徽标的横纵坐标 ，再得到 小球的 横纵坐标，然后让 y值 求差  x值也求差，得到 的结果就是横纵坐标要位移的距离
          // 5.如何获取 徽标和小球的位置？？？？？？   domObject.getBoundingClientRect()

          // 获取小球在页面中的位置
          const ballPosition = this.$refs.ball.getBoundingClientRect()
          // 获取徽标在页面中的位置
          const badgePosition = document.getElementById('badge').getBoundingClientRect()  

          const xDist =   badgePosition.left - ballPosition.left
          const yDist = badgePosition.top - ballPosition.top


          el.style.transform = `translate(${xDist}px, ${yDist}px)`
          el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)"
          done()

        },
        afterEnter(el){
          this.ballFlag = !this.ballFlag
        },
        getSelectCount(count){
          // 当子组件把选中的数量传递给父组件时候，把选中的值保存到 data身上
          this.selectCount = count
        }
    },
    components:{
      swiper,
      numbox
    }
}
</script>

<style lang="scss">
    .goodsinfo-container{
        background-color: #eee;
        overflow: hidden;

        .now_price{
          font-size: 16px;
          font-weight: 700;
          color: red;

        }
        .mui-card-footer{
          display: block;
          button{
            margin:15px 0;
          }
        }
      .ball{
        position: absolute;
        top: 390px;
        left: 148px;
        z-index: 99;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
      }
    }
</style>